<template>
	<cl-page statusBarBackground="#0C81F7" background-color="#F1F1F1" :fullscreen="true">
		<view class="page-withdraw animate__animated animate__fadeIn">
			<Header tit="WITHDRAWAL" :title="t('bill.withdraw.title')"></Header>
			<view class="content">
				<view class="money">
					<view class="title">{{ $t("bill.withdraw.money") }}</view>
					<view class="flex align-end num">
						<view class="font">￥</view>
						<cl-input
							class="input"
							clearable
							:border="false"
							:placeholder="t('bill.withdraw.moneyp')"
							v-model="money"
						/>
					</view>
					<view class="flex flex-between align-center text">
						<view class="to">{{ $t("bill.withdraw.edu") }}：250,000.00</view>
						<view class="tt">{{ $t("bill.withdraw.all") }}</view>
					</view>
				</view>
				<view class="money mt30">
					<view class="title">{{ $t("bill.withdraw.bank") }}</view>
					<view class="flex pb20 align-center text">
						<image
							class="icon"
							src="/static/images/bank.png"
							mode="aspectFill"
						></image>
						<view class="bank flex1">{{ $t("bill.withdraw.card") }}（5969）</view>
						<cl-icon name="arrow-right" color="#C7C7CC" size="40rpx"></cl-icon>
					</view>
				</view>
				<view class="btn mt30" @click="show = true">{{ $t("bill.withdraw.title") }}</view>
				<view class="mt30" style="color: #999; text-align: center"
					>{{ $t("bill.withdraw.password") }}：123456</view
				>
			</view>
			<keyboard
				:title="t('bill.withdraw.title')"
				:text="
					cache.lang == 'zh'
						? '额外扣除¥0.50服务费'
						: 'An additional ¥0.50 service charge will be deducted'
				"
				:money="money"
				:show="show"
				:pass="true"
				@close="close"
				@finsh="finsh"
			></keyboard>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import { onReady } from "@dcloudio/uni-app";
import keyboard from "/@/components/keyboard.vue";
import Header from "/@/components/header.vue";
import { useApp, useCool, useStore } from "/@/cool";
import { useUi } from "/$/cool-ui";
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
const { t } = useI18n();
const { service, router, refs, setRefs, storage, upload } = useCool();
const { cache } = useStore();
const app = useApp();
const ui = useUi();
const active = ref<number>(0);
const show = ref(false);
const money = ref(3880);

const close = () => {
	show.value = false;
};

const finsh = (e: any) => {
	show.value = false;
	if (e != "123456") {
		ui.showConfirm({
			title: cache.lang == "zh" ? "密码错误请重试" : "Password error Please try again",
			cancelButtonText: cache.lang == "zh" ? "忘记密码" : "Forgot password",
			confirmButtonText: cache.lang == "zh" ? "重试" : "Retry",
			callback: (e) => {
				if (e == "confirm") {
					show.value = true;
				} else {
				}
			},
		});
	} else {
		router.push("/pages/user/bill/withdrawResult");
	}
};
</script>

<style lang="scss" scoped>
.page-withdraw {
	.content {
		padding: 30rpx;
		box-sizing: border-box;
	}
	.money {
		width: 100%;
		background: #ffffff;
		box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(170, 170, 170, 0.1);
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 30rpx 40rpx;
		.title {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 38rpx;
			color: #333333;
		}
		.num {
			margin-top: 50rpx;
			.font {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 40rpx;
				color: #0c81f7;
			}
			:deep(.uni-input-input) {
				font-family: HelveticaNeue;
				font-weight: 500;
				font-size: 70rpx;
				color: #0c81f7;
			}
			:deep(.uni-input-placeholder) {
				font-size: 50rpx;
			}
		}
		.text {
			margin-top: 60rpx;
			.to {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}
			.tt {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 24rpx;
				color: #0c81f7;
			}
		}
		.icon {
			width: 42rpx;
			height: 42rpx;
			margin-right: 35rpx;
		}
		.bank {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
		}
	}
	.btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(0deg, #0c81f7 0%, #44a1ff 100%);
		border-radius: 20rpx;
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 38rpx;
		color: #ffffff;
		line-height: 88rpx;
		text-align: center;
	}
}
</style>
